<template>
  <a-form >
    <a-row>
      <a-col :span="16">
        <a-row>
          <table class="tablez">
            <tr>
              <td>ID：</td>
              <td>{{userInfo.id}}</td>
              <td>创建时间：</td>
              <td>{{userInfo.createTime}}</td>
            </tr>
            <tr>
              <td>姓名：</td>
              <td>{{userInfo.realname}}</td>
              <td>性别：</td>
              <td>{{userInfo.sex_dictText}}</td>
            </tr>
            <tr>
              <td>年龄：</td>
              <td>{{userInfo.age}}</td>
              <td>学历：</td>
              <td>{{userInfo.qualification_dictText}}</td>
            </tr>
            <tr>
              <td>伤史：</td>
              <td>{{userInfo.injuriesOfHistory_dictText}}</td>
              <td></td>
              <td></td>
            </tr>
            <tr>
              <td>爱好运动：</td>
              <td>{{userInfo.hobby_dictText}}</td>
              <td></td>
              <td></td>
            </tr>
          </table>
        </a-row>
      </a-col>
      <a-col :span="8">
        <img :src="userInfo.avatar" width="50%"></img>
      </a-col>
    </a-row>
    <a-row>
      <a-tabs v-model="activeKey">
        <a-tab-pane tab="记录" :key="refKeys[0]" :forceRender="true">
          <div>
            <a-table
              ref="table"
              size="middle"
              :scroll="{x:true}"
              bordered
              rowKey="id"
              :columns="columns"
              :dataSource="jiluSource"
              :pagination="jiluPage"
              :loading="jiluloading"
              @change="loadData"
              class="j-table-force-nowrap">
              <span slot="title" slot-scope="text, record">
                <a v-if="record" @click="questionClick">{{record.title}}</a>
              </span>
            </a-table>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="分析" :key="refKeys[1]" :forceRender="true">
          <div>
            <a-range-picker
              style="width: 210px"
              format="YYYY-MM-DD"
              @change="onPickerChange"
              :placeholder="['开始时间', '结束时间']"
            />
            <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 10px;">查询</a-button>
          </div>
          <div class="item-jindu">
            <a-row>
              <a-col :span="24"><h3>进度分析</h3></a-col>
            </a-row>
            <a-row>
              <a-col :span="24">
                <div style="width: 100%; padding: 10px; text-align: center;">
                  <div :style="jinduFenxi.jiejuejindu">
                    已解决问题
                    <div style="width: 100%;height: 100px;line-height: 100px; background-color: #ffd400;">
                      {{jinduFenxi.jiejue}}
                    </div>
                  </div>
                  <div :style="jinduFenxi.yichujindu">
                    已出方案问题
                    <div style="width: 100%;height: 100px;line-height: 100px; background-color: #00ff00;">
                      {{jinduFenxi.yichu}}
                    </div>
                  </div>
                  <div :style="jinduFenxi.weijindu">
                    未解决问题
                    <div style="width: 100%;height: 100px;line-height: 100px;color:#FFFFFF; background-color: #5c6065;">
                      {{jinduFenxi.wei}}
                    </div>
                  </div>
                  <div :style="jinduFenxi.wu">
                    无问题
                    <div style="width: 100%;height: 100px;line-height: 100px; background-color: #e8e8e8;">
                    </div>
                  </div>
                </div>
              </a-col>
            </a-row>
          </div>
          <div class="item-jindu">
            <a-row>
              <a-col :span="24"><h3>问题分布分析</h3></a-col>
            </a-row>
            <a-row>
              <a-col :span="12" style="border-right: 1px solid #e8e8e8">
                <table style="width:99%;">
                  <tr v-for="typeitem in typeFenxi" style="height: 38px;">
                    <td style="width: 90%">
                      {{typeitem.treePathStr}}
                    </td>
                    <td style="width: 10%">
                      {{typeitem.questionCount}}
                    </td>
                  </tr>
                </table>
              </a-col>
              <a-col :span="12" style="padding: 10px;">
                <div>
                  <p class="tag-item-z" v-for="tagitem in tagFenxi">{{tagitem.tagName}}({{tagitem.questionCount}})</p>
                </div>
              </a-col>
            </a-row>
          </div>
        </a-tab-pane>
        <a-tab-pane tab="档案" :key="refKeys[2]" :forceRender="true">
          <div v-for="(danganSourceItem, i) in danganSource" style="width: 80px; text-align: center;float: left;margin-right: 10px;">
            <a :href="danganSourceItem.file" target="_blank">
              <div style="background-image: url(https://gunku-test.oss-cn-beijing.aliyuncs.com/temp/pdf_1611484869538.jpeg);background-size: 100% auto; width:80px; height:104px;">
                <a-popconfirm title="确定删除吗?" @confirm="() => delPDF(i)">
                  <a-icon type="delete"  style="margin-left:70px;"/>
                </a-popconfirm>
              </div>
              <div>{{danganSourceItem.name}}</div>
            </a>
          </div>
          <div style="">
            <j-upload @change="uploadChange" :initDate="true" :showUploadList="false" :returnUrl="false" :trigger-change="true" style="margin-top: 70px;"></j-upload>
          </div>
        </a-tab-pane>
      </a-tabs>
    </a-row>
  </a-form>
</template>

<script>
  import JUpload from '@/components/jeecg/JUpload'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import {delPDF,savePDF, getPdfList, getQuestionList, getStatisticStatus, getStatisticTag, getStatisticType} from '@/api/api'

  export default {
    name: "TraineeDetails",
    components: {
      JFormContainer,
      JUpload
    },
    data() {
      return {
        isVisible: false,
        createTimeRange: [],
        userInfo: {},
        jinduFenxi: {
          jiejue : 0,
          jiejuejindu: 'float:left;width:30%; display: none',
          yichu: 0,
          yichujindu: 'float:left;width:30%; display: none',
          wei: 0,
          weijindu: 'float:left;width:30%; display: none',
          wu: 'display: block; width: 100%;'
        },
        typeFenxi: [],
        tagFenxi: [],
        refKeys: ['jilu', 'fenxi', 'dangan' ],
        tableKeys:['jilu', 'fenxi', 'dangan' ],
        activeKey: 'jilu',
        jiluPage: {'current': 1,
          'pageSize': 10,
          'showQuickJumper': true,
          'showSizeChanger': true,
          'total': 0},
        jiluSource: [],
        jiluloading: true,
        danganSource:[],
        columns: [
          {
            title:'创建日期',
            align:"center",
            sorter: true,
            dataIndex: 'createTime'
          },
          {
            title:'问题标题',
            align:"center",
            dataIndex: 'title',
            scopedSlots: { customRender: 'title' }
          },
          {
            title:'学员',
            align:"center",
            dataIndex: 'trainee_dictText'
          },
          {
            title:'问题状态',
            align:"center",
            dataIndex: 'questionStatus_dictText'
          },
          {
            title:'问题分类',
            align:"center",
            dataIndex: 'questionTypeJoin'
          }
        ],
      }
    },
    created() {
      this.userInfo = this.$route.query.userInfo
      this.show(this.userInfo)
      //初始化 tabName
      this.initTabName()
    },
    methods: {
      show(record) {
        this.userId = record.userId
        this.isVisible = true
        this.loadData()
        this.loadDanganData()
        this.loadFenxiData()
      },
      questionClick(){
        this.$router.push({path:'/question/question', query: {couponId: this.userInfo.realname}})
      },
      initTabName() {
        /*console.log("jinlai")
        this.$parent.changeTitle("棍库");*/
        /*var ele = document.getElementsByClassName('ant-tabs-tab');
        for(var i = 0; i < ele.length; i++) {
          var spanEle = ele[i].getElementsByTagName("span")
          if(spanEle.length > 0) {
            var pagekey = spanEle[0].getAttribute("pagekey")
            if(pagekey != '' && pagekey != undefined && pagekey != 'undefined') {
              var pagekeyArr = pagekey.split("=")
              if(pagekeyArr.length > 0) {
                var val = pagekeyArr[pagekeyArr.length - 1]
                var key = pagekeyArr[pagekeyArr.length - 2]
                if(key != undefined && key != 'undefined' && key.indexOf("userName") >= 0) {
                  spanEle[0].innerHTML = val + '详情'
                }
              }
            }
          }
        }*/
      },
      delPDF(idx) {
        var pdfitem = this.danganSource[idx]
        var paramter = {
          'id': pdfitem.id
        }
        delPDF(paramter).then(res=>{
          console.log(res)
          if(res.success) {
            this.$message.success("删除成功")
            this.danganSource.splice(idx, 1)
          }else {
            this.$message.error("删除失败："+res.message)
          }
        })
      },
      uploadChange(file) {
        console.log(file[0])
        var dIndex = file[0].fileName.lastIndexOf(".");
        var item = {
          'id': '',
          'name': file[0].fileName.substring(0, dIndex),
          'file': file[0].filePath,
          'userId': this.userInfo.userId
        }
        savePDF(item).then(res=>{
          console.log(res)
          if(res.success) {
            this.$message.success("上传成功")
            this.loadDanganData()
          }else {
            this.$message.error("上传失败："+res.message)
          }
        })
      },
      loadData (page) {
        var that = this
        var pageNo = 1
        if(page != 'undefined' && page != undefined){
          pageNo = page.current
        }
        var paramter = {
          'trainee': this.userInfo.userId,
          'pageNo': pageNo,
          'pageSize': 10
        }
        this.jiluSource =[]
        getQuestionList(paramter).then(res=>{
          if(res.success){
            var result = res.result
            var pag = {
              'current': pageNo,
              'pageSize': 10,
              'showQuickJumper': true,
              'showSizeChanger': true,
              'total': parseInt(result.total)
            }
            that.jiluSource = result.records
            that.jiluPage = pag
            that.jiluloading = false
          }
        })
      },
      onPickerChange(obj, obj2){
        this.createTimeRange = []
        if(obj2[0] != '') {
          this.createTimeRange.push(obj2[0]+' 00:00:00')
          this.createTimeRange.push(obj2[1]+' 23:59:59')
        }
      },
      loadDanganData () {
        var that = this
        this.danganSource =[]
        getPdfList({'objectId':this.userInfo.userId, 'objectType': 1}).then(res=>{
          if(res.success) {
            that.danganSource =res.result
            console.log(that.danganSource)
          }
        })
      },
      loadFenxiData () {
        if(this.createTimeRange.length == 0){
          this.createTimeRange.push('2020-12-12 12:12:12')
          this.createTimeRange.push(this.toDays())
        }
        var that = this
        var paramter = {
          'traineeId': this.userInfo.userId,
          'startTime': this.createTimeRange[0],
          'endTime': this.createTimeRange[1]
        }
        getStatisticStatus(paramter).then(res=>{
          if(res.success) {
            if(res.result == null) {
              var jindu = {
                jiejue: 0,
                jiejuejindu: 'float:left;width:30%; display: none',
                yichu: 0,
                yichujindu: 'float:left;width:30%; display: none',
                wei: 0,
                weijindu: 'float:left;width:30%; display: none',
                wu: 'display: block; width: 100%;'
              }
              that.jinduFenxi = jindu
            }else {
              var resData = res.result
              var done = (resData.done===0 || resData.total === 0 ? '0' : (resData.done / parseInt(resData.total) * 100))
              var beingProcessed = (resData.beingProcessed===0 || resData.total === 0 ? '0' : (resData.beingProcessed / parseInt(resData.total) * 100))
              var untreated = (resData.untreated===0 || resData.total === 0 ? '0' : (resData.untreated / parseInt(resData.total) * 100))
              var jindu = {
                jiejue: resData.done,
                jiejuejindu: 'float:left;background:;width:'+done+'%; display:'+(resData.done==0 || resData.total==0 ? 'none' : 'block'),
                yichu: resData.beingProcessed,
                yichujindu: 'float:left;width:'+beingProcessed+'%; display: '+(resData.beingProcessed==0 || resData.total==0 ? 'none' : 'block'),
                wei: resData.untreated,
                weijindu: 'float:left;width:'+untreated+'%; display: '+(resData.untreated==0 || resData.total==0 ? 'none' : 'block'),
                wu: 'display: '+(resData.total === 0 ? 'block' : 'none')+'; width: 100%;'
              }
              that.jinduFenxi = jindu
            }
          }
        })
        getStatisticType(paramter).then(res=>{
          if(res.success) {
            that.typeFenxi = res.result.records
          }
        })
        getStatisticTag(paramter).then(res=>{
          if(res.success) {
            that.tagFenxi = res.result.records
          }
        })
      },
      searchQuery () {
        this.loadFenxiData()
      },
      close () {
        this.isVisible = false
      },
      beforeDay() {
        //前十天天
        let beforeDay = new Date(
          new Date(this.alarmformSearch.date).getTime() - 10 * 60 * 60 * 1000
        ); //计算当前日期 -1
        return this.convertToDate(beforeDay) + ' 00:00:01'
      },
      toDays() {
        return this.convertToDate(new Date()) + ' 23:59:59'
      },
      convertToDate(date) {
        var date = new Date(date);
        var y = date.getFullYear();
        var m = date.getMonth() + 1;
        var d = date.getDate();
        m = m < 10 ? "0" + m : m; //月小于10，加0
        d = d < 10 ? "0" + d : d; //day小于10，加0
        return y + "-" + m + "-" + d;
      },
    }
  }
</script>

<style scoped>
  .tablez{
    width: 100%;
  }
  .tablez td {
    height: 36px;
  }
  .tablez tr td:nth-child(1) {
    width: 20%;
    text-align: right;
  }
  .tablez tr td:nth-child(2) {
    width: 30%;
    text-align: left;
  }
  .tablez tr td:nth-child(3) {
    width: 20%;
    text-align: right;
  }
  .tablez tr td:nth-child(4) {
    width: 30%;
    text-align: left;
  }
  .item-jindu{
    width: 100%;
    margin-top: 25px;
    margin-bottom: 25px;
    padding: 10px;
    border: 1px solid #f7f3f3;
    border-radius: 9px;
    box-shadow: 0 3px 0px #e8e8e8;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  .tag-item-z{
    margin-right: 6px;
    margin-bottom: 6px;
    padding: 3px 12px;
    text-align: center;
    float:left;
    border: 1px solid #f7f3f3;
    border-radius: 9px;
    box-shadow: 0 3px 0px #e8e8e8;
    -webkit-transform: translateY(-10px);
    -moz-transform: translateY(-10px);
    transform: translateY(-10px);
  }
</style>